import { Button, Flex, Form, Input, message, Radio, Select, type FormProps } from "antd"
import { useEffect, useState } from "react";
import RichTextEditor from "../utils/RichTextEditor";
import '../assets/css/stores/storesAdd.css'
import UploadImg from "../utils/UploadImg";
import { useNavigate, useParams } from "react-router";
import { newsAdd, newsGet, newstypeList } from "../apis/news";
import type { newsAddParams } from "../type/news";
import type { ScopeServicesList } from "../type/stores";

type FieldType = {
    addtime: string
    content: string
    edituser: string
    hits: string
    id: string
    picture: string
    state: number
    title: string
    type: string
};


function StoresAdd() {
    const [form] = Form.useForm();
    const [picture, setPicture] = useState<string | undefined>();
    let { id } = useParams();
    let navigate = useNavigate();
    const stateData = [
        { label: '显示', value: 1 },
        { label: '隐藏', value: 2 },
    ]
    useEffect(() => {
        newstypeListApi()
        if (Number(id) !== 0) {
            newsGetApi()
        }
    }, [])

    useEffect(() => {
        form.setFieldValue("picture", picture);

    }, [picture])

    let [newstype, setNewstype] = useState<ScopeServicesList[]>([])
    const uploadHandle = (url: string) => {

        form.setFieldValue("picture", url);

    }

    const onFinish: FormProps<newsAddParams>['onFinish'] = async (values) => {
        let newsData = {
            addtime: "2025-08-05 16:33:28",
            edituser: "admin",
            hits: "0",
            id: "0",
        }
        newsData.id = id as string

        let res = await newsAdd({ ...newsData, ...values })
        if (res.errCode == 10000) {
            message.success(id !== '0' ? '修改成功' : '添加成功')
            navigate('/home/news')
        }
    };

    // 类型列表
    let newstypeListApi = async () => {
        let res = await newstypeList()
        setNewstype(res.data.list)
    }

    // 获取单个信息
    const newsGetApi = async () => {
        let res = await newsGet(Number(id))
        setPicture(res.data.picture)
        form.setFieldsValue(res.data)
    }

    return (
        <div className='StoresAdd' style={{ width: '100%' }}>
            <h4>添加门店</h4>
            <Form
                name="basic"
                style={{ width: '100%', paddingBottom: '50px' }}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                form={form}
                autoComplete="off"
            >
                <Form.Item<FieldType>
                    label="标题"
                    name="title"
                    style={{ width: '600px' }}
                    rules={[{ required: true, message: '请输入店名!' }]}
                >
                    <Input style={{ width: '300px' }} placeholder="请输入店名" />
                </Form.Item>
                <Form.Item<FieldType>
                    label="公告内容"
                    name="content"
                    style={{ width: '900px' }}
                >
                    <RichTextEditor
                    />
                </Form.Item>
                <Form.Item<FieldType>
                    label="公告照片"
                    name="picture"
                    style={{ width: '600px' }}
                >

                    {picture}
                    <UploadImg uploadHandle={uploadHandle} defaultImgUrl={picture} />
                </Form.Item>

                <Form.Item
                    label="状态"
                    name="state"
                    style={{ width: '400px' }}
                    rules={[{ required: true, message: '请选择状态!' }]}>
                    <Radio.Group block options={stateData} defaultValue={1} />
                </Form.Item>

                <Form.Item
                    label="类型"
                    name="type"
                    style={{ width: '600px' }}
                    rules={[{ required: true, message: '请选择类型!' }]}>
                    <Select
                        allowClear
                        style={{ width: '300px' }}
                        placeholder="请选择"
                    >
                        {
                            newstype.map((item) => {
                                return <Select.Option value={item.id}>{item.name}</Select.Option>
                            })
                        }
                    </Select>
                </Form.Item>

                <Form.Item label={null}>
                    <Flex style={{ marginLeft: '180px' }}>
                        <Button type="primary" htmlType="submit" style={{ width: '100px', marginRight: '20px' }}>
                            确定
                        </Button>
                        <Button style={{ width: '100px' }}>
                            取消
                        </Button>
                    </Flex>

                </Form.Item>
            </Form>
        </div >
    )
}
export default StoresAdd